<template>
  <div class="contianer">
      <Loading  :class="{none:!showLoad}"/>
     <toast v-model="showToast" type="text" width="2.4rem" :time="1000" is-show-mask text="暂无更多数据" position="default"></toast>
    <marquee class="marquee">
      <marquee-item v-for="(item,key) of asynclist" :key="key" direction="down" @click.native="onClick(key)" class="align-middle">欢迎编号{{item.code}}-{{item.nickname}}女神参加活动！</marquee-item>
    </marquee>
      <!-- <header class="no-select "><img :src="logo" alt=""></header> -->
    <nav class="no-select">
      <p @click.passive="toRuler" ></p>
      <p @click.passive="toPrize" ></p>
    </nav>
    <pull-to  :top-block-height="5" :is-throttle-scroll="true" :bottom-block-height="5"  lock-x ref="scrollerBottom" :bottom-load-method="loadMore">
       <!-- :top-load-method="intiList" -->
    <article class="no-select">
      <Voteleave/>
    </article>
    <p class="no-select" :class="{joingirl:!join,joined:join}" @click="joinHome(join,auditStatus)"></p>
    <div class="diliver">提示：活动报名仅限年满16周岁，且为江西省内高校（含高职院校）学生参加。</div>
    <p class="search"><input type="text" v-model="myquery.search" placeholder="请输入选手编号\昵称\院校名称"><label @click.passive="searchUser('search',1)()"></label></p>
    <!-- <div class="search-list">
      <span @click.passive="searchUser('votesOrder',1)()"></span><span @click.passive="searchUser('dateOrder',1)()"></span>
      <popup-radio title="地市" :options="districts" v-model="district" placeholder="选择地市" @on-hide="searchUser('cityId', 1)()"></popup-radio><popup-radio title="视频" :options="hasvideoList" v-model="hasvideo" placeholder="选择视频" @on-hide="searchUser('hasVideo', 1)()"></popup-radio>
    </div> -->
    <div class="show-tag"></div>
     <div class="search-list">
    <p class="search-type ">
      <span  @click.passive="searchUser('votesOrder',1)()" :class="{active:votesOrderFlag}">按守护值排序</span><span @click.passive="searchUser('dateOrder',1)()" :class="{active:dateOrderFlag}">按最新排序</span>
      </p>
    <p class="popsearch ">
      <popup-radio title="" :options="districts" v-model="district" placeholder="所有地区  ▼" @on-hide="searchUser('cityId', 1)()"></popup-radio><popup-radio title="" :options="hasvideoList" v-model="hasvideo" placeholder="全部  ▼" @on-hide="searchUser('hasVideo', 1)()"></popup-radio>
      </p>
     </div>
    <ul class="p-container" v-if="personList.length">
      <li  v-for="(items,key) of personList" :key="key"  :data="items.id">
          <Person v-if="items" :personlist='items'/>  
      </li>
    </ul>
    <ul class="n-container" v-if="!personList.length">
      <li class="tip-info">当前没有此类查询信息</li>
    </ul>
    <divider>上拉屏幕查看更多女神</divider>
    </pull-to>
    <div class="my-guang animated" :class="{bounceOutDown:fadeSwiper}"><span class="close" @click.passive="closeSwiper"></span> <swiper :list="demo01_list"  v-model="demo01_index" @on-index-change="demo01_onIndexChange" :aspect-ratio="113/640" loop="loop" auto="auto"></swiper></div>
    <Follow v-if="!followflag" :follow="followflag" />
    <Bind v-else-if="!bindflag" :bind="bindflag"/>
  </div>
</template>
<script>
import { Marquee, MarqueeItem, PopupRadio, Swiper, LoadMore, Toast, Divider } from "vux";
import Voteleave from "@/components/com/Voteleave";
import Person from "@/components/com/Person";
import Bind from "@/components/com/Bind";
import Follow from "@/components/com/Follow";
import PullTo from "vue-pull-to";
import Loading from "@/components/com/Loading";
import Qs from "qs";
import { debounce } from "vux";
import {
  getServerHost,
  preventMove,
  GetRequest,
  checkMobile,
  checkQq,
  weChatRefresh
} from "@/assets/lib/tool.js";
import { wxShare } from "@/assets/lib/wxshare.js";
import { setTimeout } from "timers";
const baseList = [
  {
    url: "javascript:",
    img: require("@/assets/img/swiper2.png")
  },
  {
    url: "javascript:",
    img: require("@/assets/img/swiper3.png")
  },
  {
    url: "javascript:",
    img: require("@/assets/img/swiper1.png")
  }
];
const TOP_DEFAULT_CONFIG = {
  pullText: "下拉刷新", // 下拉时显示的文字
  triggerText: "释放更新", // 下拉到触发距离时显示的文字
  loadingText: "加载中...", // 加载中的文字
  doneText: "加载完成", // 加载完成的文字
  failText: "加载失败", // 加载失败的文字
  loadedStayTime: 500, // 加载完后停留的时间ms
  stayDistance: 10, // 触发刷新后停留的距离
  triggerDistance: 60 // 下拉刷新触发的距离
};

const BOTTOM_DEFAULT_CONFIG = {
  pullText: "上拉加载",
  triggerText: "释放更新",
  loadingText: "加载中...",
  doneText: "加载完成",
  failText: "加载失败",
  loadedStayTime: 500,
  stayDistance: 100,
  triggerDistance: 5
};
export default {
  name: "home",
  directives: {

  },
  components: {
    Marquee,
    MarqueeItem,
    PopupRadio,
    Person,
    Swiper,
    PullTo,
    LoadMore,
    Toast,
    Bind,
    Follow,
    Divider,
    Loading,
    Voteleave
  },
  data() {
    return {
      showLoad: true,
      showFollow: true, //关注
      showBind: false, //绑定
      demo01_list: baseList,
      demo01_index: 0,
      key: "",
      asynclist: 0,
      logo: require("@/assets/img/logo.png"),
      district: "",
      fadeSwiper: false,
      auditStatus: 0,
      districts: [],
      hasvideo: "",
      votesOrderFlag: false,
      dateOrderFlag: true,
      hasvideoList: [
        {
          key: "2",
          value: "全部"
        },
        {
          key: "1",
          value: "有视频"
        },
        {
          key: "0",
          value: "无视频"
        }
      ],
      openid: GetRequest().openid,
      queryNewListUrl: "/wxjx/goddess/common/user/queryNewList",
      queryuniversityUrl: "/wxjx/goddess/common/university/queryList",
      queryListUrl: "/wxjx/goddess/common/user/queryList",
      judgeUrl: "/wxjx/goddess/common/user/judge", //判断用户是否绑定和参赛
      queryInfoMyselfUrl: "/wxjx/goddess/common/user/queryInfoMyself", //判断用户是否绑定和参赛
      personList: [],
      hasNextPage: false,
      showToast: false,
      userid: '',
      join: 1,
      bindflag: 1,
      followflag: 1,
      myquery: {
        cityId: "", //城市名称
        dateOrder: "1", //最近 1/0
        hasVideo: "", //视频 1/0
        search: "", //昵称和编号查询
        pageNo: "1", // 页码
        pageSize: "5", //一页的大小
        votesOrder: "" //投票数
      }
    };
  },
  mounted() {
    weChatRefresh();
    // document.body.addEventListener('touchmove', preventMove, { passive: false })
    this.$nextTick(() => {
      //获取新参赛的用户
      this.queryNewJoinUser();
      this.getSchool();
      //查询参赛用户
      this.intiList();
      //查询是否关注绑定
      this.queryBind();
      //获取自己的id
      this.queryInfoMyself();
      setTimeout(() => {
        wxShare();
        this.showLoad = false;
      }, 500)
    })
  },
  computed: {
    newUser: function () {
      return this.asynclist;
    }
  },
  watch: {
    district(val) {
      return val;
    },
    hasvideo(val) {
      return val;
    },
    hasNextPage(val) {
      return val;
    },
    join(val) {
      return val;
    },
    bindflag(val) {
      return val;
    },
    followflag(val) {
      return val;
    }
  },
  methods: {

    //初始化列表
    intiList(loaded) {
      let vm = this;
      loaded = loaded || "none";
      this.$http
        .get(getServerHost() + this.queryListUrl, {
          params: this.myquery
        })
        .then(rs => {
          rs = rs.data;
          //console.log(rs.code);
          if ("200" == rs.code) {
            vm.hasNextPage = rs.res.hasNextPage;
            if (Array.isArray(rs.res.list)) {
              vm.personList = rs.res.list;
              "none" == loaded ? "" : loaded("done");
            }
          } else {
            "none" == loaded ? "" : "";
          }
        });
    },
    //查询用户是否关注是否绑定
    queryBind() {
      var vm = this;
      this.$http
        .get(getServerHost() + this.judgeUrl, {
          params: {
            openid: vm.openid
          }
        })
        .then(rs => {
          rs = rs.data;
          //是否参加活动
          if ("200" == rs.code) {
            vm.join = '1' == rs.res.join ? 1 : 0;
            //是否绑定
            vm.bindflag = '1' == rs.res.bind ? 1 : 0;
            //是否关注
            vm.followflag = '1' == rs.res.subscribe ? 1 : 0;
            vm.auditStatus = rs.res.auditStatus;
            //console.log(vm.join, vm.bindflag, vm.followflag);
          }
        });
    },
    //查询最近参赛的用户
    queryNewJoinUser() {
      var vm = this;
      this.$http.get(getServerHost() + this.queryNewListUrl).then(rs => {
        rs = rs.data;
        if ("200" == rs.code) {
          this.asynclist = rs.res;
        }
      });
    },
    //滚动到顶部
    toTop() {
      document.body.scrollTop = 0;
    },
    //查询自己的参赛信息
    queryInfoMyself(resolve, reject) {
      var vm = this;
      this.$http
        .get(getServerHost() + this.queryInfoMyselfUrl, {
          params: {
            openid: vm.openid
          }
        })
        .then(rs => {
          rs = rs.data;
          if ("200" == rs.code) {
            this.userid = rs.res.id;
          } else {
          }
        });
    },
    //前往报名
    joinHome(join, auditStatus) {
      //console.log(join);
      if (2 == auditStatus || 0 == auditStatus) {
        this.$router.push({ name: "auditing", query: { openid: this.openid } });
        return;
      }
      if (join == '1') {
        this.$router.push({ name: "user", query: { openid: this.openid, userid: this.userid } });
      } else if (join == '0' && '1' == this.bindflag && '1' == this.followflag) {
        this.$router.push({ name: "main", query: { openid: this.openid, type: 'auditing' } });
      }
    },
    //前往奖品页面
    toPrize() {
      this.$router.push({ name: "prize", query: { openid: this.openid } });
    },
    //获取地市
    getSchool() {
      var vm = this;
      this.$http.get(getServerHost() + this.queryuniversityUrl).then(rs => {
        rs = rs.data;
        rs.res.cityList.unshift({ key: '12', value: '全部' });
        vm.districts = rs.res.cityList;
        // console.log(vm.districts);
        // vm.school = rs.res.universityList;
      });
    },
    //加载更多
    loadMore(loaded) {
      let vm = this;
      // searchUser('pageNo', 1, loaded)
      //console.log(vm.hasNextPage);
      if (!vm.hasNextPage) {
        vm.showToast = true;
        return;
      }
      vm
        .searchUser("pageNo", vm.myquery.pageNo)()
        .then(result => {
          if ("done" == result) {
            vm.myquery["pageNo"]++;
          }
          loaded(result);
        });
    },
    //查询参赛用户列表
    searchUser(searchKey, pageNo) {
      let vm = this;
      vm.showLoad = true;
      //console.log("vm.myquery", vm.myquery);
      let myquery = null;
      myquery = {
        cityId: "", //城市名称
        dateOrder: "", //最近 1/0
        hasVideo: "", //视频 1/0
        search: "", //昵称和编号查询
        pageNo: pageNo, // 页码
        pageSize: 2, //一页的大小
        votesOrder: "" //投票数
      };
      if ("pageNo" == searchKey) {
        //console.log();
        // myquery[vm.saveKey] = vm.myquery[vm.saveKey]
      } else {
        vm.saveKey = searchKey;
      }
      switch (searchKey) {
        case "cityId":
          vm.myquery.pageNo = 1;
          vm.myquery[searchKey] = vm.district;
          //console.log("vm.district", vm.district);
          break;
        case "hasVideo":
          vm.myquery.pageNo = 1;
          vm.myquery[searchKey] = vm.hasvideo;
          break;
        case "dateOrder":
          vm.votesOrderFlag = false;
          vm.dateOrderFlag = true;
          vm.myquery.pageNo = 1;
          vm.myquery.votesOrder = "";
          vm.myquery[searchKey] = 1;
          break;
        case "votesOrder":
          vm.votesOrderFlag = true;
          vm.dateOrderFlag = false;
          vm.myquery.pageNo = 1;
          vm.myquery.dateOrder = "";
          vm.myquery[searchKey] = 1;
          break;
        case "hasVideo":
          vm.myquery.pageNo = 1;
          //console.log("vm.district", vm.hasvideo);
          vm.myquery[searchKey] = vm.hasvideo;
          break;
        case "pageNo":
          // 第一次不翻页修改第一页为8个,为了适应pullto的height=100%
          if ("1" == pageNo) {
            vm.myquery["pageSize"] = 8;
          } else {
            vm.myquery["pageSize"] = 8;
          }
          break;
        case "search":
          vm.myquery.pageNo = 1;
          vm.myquery[searchKey] = vm.myquery.search;
          break;
      }

      // vm.myquery = myquery;
      return vm.queryList;

      // for (let key of Reflect.ownKeys(myquery)) {
      //   //console.log(key);
      //   switch (key)
      // }
      //  myquery[searchKey]=1
    },
    //查询参赛用户
    queryList(resolve, reject) {
      var vm = this;
      return new Promise(function (resolve, reject) {
        //console.log("start");
        vm.$http
          .get(getServerHost() + vm.queryListUrl, {
            params: vm.myquery
          })
          .then(rs => {
            rs = rs.data;
            if ("200" == rs.code) {
              setTimeout(() => {
                vm.showLoad = false;
              }, 500)
              vm.hasNextPage = rs.res.hasNextPage;
              //----------------------------
              if (Array.isArray(rs.res.list)) {
                // 第一次不翻页修改第一页为8个,为了适应pullto的height=100%
                if ("1" == vm.myquery["pageNo"]) {
                  vm.personList = rs.res.list;
                } else {
                  vm.personList = vm.personList.concat(rs.res.list);
                }
                //console.log(vm.personList);
                resolve("done");
              }
            } else {
              resolve("fail");
            }
          });
      });
    },
    //跳转到规则页面
    toRuler() {
      this.$router.push({ name: "ruler" });
    },
    demo01_onIndexChange(index) {
      this.demo01_index = index;
    },
    closeSwiper() {
      this.fadeSwiper = true;
    },
    // //显示用户的详情
    // showPersonDetails(id) {
    //   //console.log(id);
    //   let vm = this;
    //   this.$router.push({ name: "vote", query: { openid: vm.openid, id: id } });
    // }
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/style/formreset.css";

.my-guang {
  position: fixed;
  width: 100%;
  height: auto;
  bottom: 0;
  .close {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
    width: 50px;
    height: 50px;
    z-index: 666;
  }
}
.search-list {
  display: flex;
  justify-content: center;
}
.diliver {
  margin: 0 auto;
  width: 568px;
  color: #ea5a91;
  font-size: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #b0b0b0;
}
.contianer {
  padding-top: 26px;
  width: 100%;
  height: 100%;
  background: #ffe2e4;
  min-height: 100%;
  .vux-marquee {
    position: fixed;
    top: 0;
    z-index: 666;
    width: 100%;
    height: 35px;
    background: url("../../assets/img/slide-nav.png") no-repeat;
    background-size: 100% 100%;
  }
  .swapper {
    overflow: hidden;
  }
  header {
    position: fixed;
    top: 35px;
    left: 0;
    text-align: left;
    z-index: 300;
    img {
      width: 130px;
      height: 71px;
    }
  }
  nav {
    position: fixed;
    right: 0;
    top: 355px;
    z-index: 300;
    p:first-child {
      width: 53px;
      height: 173px;
      background: url("../../assets/img/right-nav.png") no-repeat -5px -4px;
      background-size: 58px 376px;
    }
    p:nth-child(2) {
      width: 53px;
      height: 173px;
      background: url("../../assets/img/right-nav.png") no-repeat -5px -197px;
      background-size: 58px 376px;
    }
  }
  .show-tag {
    margin: 0 auto;
    width: 134px;
    height: 59px;
    background: url("../../assets/img/girl-show.png") no-repeat;
    background-size: 100% 100%;
  }
  article {
    position: relative;
    margin: 0 auto;
    width: 640px;
    height: 316px;
    background: url("../../assets/img/title.png") no-repeat;
    background-size: 100% 100%;
  }
  .joingirl {
    margin: 0 auto;
    width: 383px;
    height: 151px;
    background: url("../../assets/img/join.png") no-repeat 15px 0;
    background-size: 100% 100%;
  }
  .joined {
    margin: 0 auto;
    width: 367px;
    height: 136px;
    background: url("../../assets/img/poster.png") no-repeat 15px 10px;
    background-size: 100% 100%;
  }
  .search {
    display: flex;
    justify-content: center;
    margin: 21px auto 15px;
    width: 506px;
    position: relative;
    input {
      width: 506px;
      height: 54px;
      line-height: 54px;
      border-radius: 30px;
      padding: 0 25px;
      margin: 0 15px;
      font-size: 18px;
    }
    label {
      position: absolute;
      right: 30px;
      top: 14px;
      width: 36px;
      height: 33px;
      background: url("../../assets/img/search-btn.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .n-container {
    text-align: center;
    font-size: 28px;
  }

  .search-type {
    display: flex;
    justify-content: center;
    margin: 21px 0 15px 0;
    align-items: center;
    span {
      color: #333;
      margin: 0 5px;
    }
    span:first-child {
      font-size: 14px;
      width: 110px;
      height: 34px;
      line-height: 34px;
      background: #dddddd;
      border-radius: 15px;
      border: 2px solid #f1e2e6;
      // background: url("../../assets/img/search.png") no-repeat;
      // background-size: 362px 51px;
    }
    span:nth-child(2) {
      font-size: 14px;
      width: 110px;
      height: 34px;
      line-height: 34px;
      background: #dddddd;
      border-radius: 15px;
      border: 2px solid #f1e2e6;
      // background: url("../../assets/img/search.png") no-repeat -195px 0;
      // background-size: 362px 51px;
    }
    .active {
      background: #ef6690 !important;
      border: 2px solid #f1e2e6 !important;
    }
  }
  .popsearch {
    display: flex;
    justify-content: center;
    margin: 21px 0 15px 0;
  }

  .weui-cell__hd {
    padding: 0 10px !important;
  }
  .weui-cell {
    padding: 0 10px !important;
  }
  .p-container {
    margin: 0 auto;
    width: 572px;
    display: flex;
    justify-content: space-between;
    align-content: center;
    flex-wrap: wrap;
    padding-bottom: 23px;
    > li {
      width: 578px;
      height: 254px;
      align-items: center;
      margin-bottom: 26px;
    }
  }
}
</style>
